<template>
  <div class="main-div">
    <div class="search-div">
      <el-form
        :inline="true"
        :model="queryParam"
        class="demo-form-inline"
      >
        <el-form-item label="用户编码:">
          <el-input
            v-model="queryParam.userCode"
            class="text-input"
            placeholder="请输入用户编码"
            prefix-icon="el-icon-search"
          />
        </el-form-item>
        <el-form-item label="用户名称:">
          <el-input
            v-model="queryParam.userAccount"
            class="text-input"
            placeholder="请输入用户名称"
            prefix-icon="el-icon-search"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="onSubmit"
          >
            查询
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="addNewDialog"
          >
            新增
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <div>
      <div class="main-table">
        <el-table
          ref="multipleTable"
          :data="pageInfo.records"
          tooltip-effect="dark"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
          @row-dblclick="onShow"
        >
          <el-table-column
            prop="userAccount"
            label="用户账号"
            width=""
          />
          <el-table-column
            prop="userDesc"
            label="用户描述"
            width="180"
          />
          <el-table-column
            prop="addTime"
            label="创建时间"
            width=""
          />
          <el-table-column
            prop="modifyTime"
            label="修改时间"
            width=""
          />

          <el-table-column
            fixed="right"
            label="操作"
            width="260"
          >
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="small"
                @click="handleEditClick(scope.row)"
              >
                编辑
              </el-button>
              <el-button
                type="danger"
                size="small"
                @click="handleDeleteClick(scope.row)"
              >
                删除
              </el-button>
              <el-button
                type="primary"
                size="small"
                @click="handlePasswordClick(scope.row)"
              >
                修改密码
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <el-pagination
          class="margin-top"
          small
          background
          layout="prev, pager, next"
          :total="pageInfo.total"
          :page-size="pageInfo.size"
          :current-page="pageInfo.current"
          @current-change="handlePageChange"
          @next-click="handlePageChange"
          @prev-click="handlePageChange"
        />
      </div>
    </div>

    <div>
      <el-dialog
      :title="'修改密码'"
      :visible.sync="passwordDialogVisible"
      :close-on-click-modal="false"
      width="500">
        <el-form
        label-position="left"
        label-width="80px"
        :model="saveObject"
        size="small">
          <el-form-item label="原密码：">
            <el-input v-model="saveObject.oldPassword"></el-input>
          </el-form-item>
          <el-form-item label="新密码：">
            <el-input v-model="saveObject.newPassword"></el-input>
          </el-form-item>
        </el-form>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button
            type="primary"
            @click="savePassword"
          >保 存</el-button>
          <el-button @click="passwordDialogVisible = false">取 消</el-button>
        </span>
      </el-dialog>
    </div>

    <div>
      <el-dialog
        :title="saveFlag==='edit'?'修改用户':'新增用户'"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        width="500"
      >
        <el-form
          label-position="left"
          label-width="80px"
          :model="saveObject"
          size="small"
        >
          <el-form-item label="用户账号">
            <el-input v-model="saveObject.userAccount" />
          </el-form-item>
          <el-form-item label="用户密码" v-if="saveFlag==='add'">
            <el-input v-model="saveObject.password"></el-input>
          </el-form-item>
          <el-form-item label="用户描述">
            <el-input v-model="saveObject.userDesc" />
          </el-form-item>
          <el-form-item label="用户角色" style="width:100%">
            <el-select v-model="saveObject.roleCode" @change="currentSetRole" filterable placeholder="==请输入或选择名称==">
              <el-option
                v-for="item in roleList"
                :key="item.roleCode"
                :label="item.roleName"
                :value="item.roleCode">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button
            type="primary"
            @click="save"
          >保 存</el-button>
          <el-button @click="dialogVisible = false">取 消</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
    import {mapGetters} from 'vuex'
    import {addUser, deleteUser, listUser, updateUser,userRole} from '../../api/manager/user'
    import {list} from '../../api/manager/role'
    import {createMD5} from "../../utils/utils";

    export default {
        name: 'User',
        data () {
            return {
                viewDialogVisible: false,
                dialogVisible: false,
                passwordDialogVisible: false,
                saveFlag: 'add',
                pageInfo: {
                    size: 10,
                    current: 1,
                    total: 0
                },
                queryParam: {
                    criClass: '',
                    keyWord: ''
                },
                // 已被多选的值
                multipleSelection: [],
                // 显示dialog绑定值
                showObject: {},
                saveObject: {
                },
                roleList:[],
            }
        },
        created () {
            this.loadData();
            list().then(res=>{
                this.roleList=res;
            })
        },
        computed: {
            ...mapGetters([
                'wsMsg'
            ])
        },
        watch: {
            // 监测 wsMsg
            wsMsg: function (msg) {

            }
        },
        methods: {
            // 初始查询
            loadData () {
                let queryPage = {
                    pageInfo: {
                        pageSize: this.pageInfo.size,
                        current: this.pageInfo.current,
                    },
                    queryParam: this.queryParam
                }
                // 初始查询数据
                listUser(queryPage).then(res => {
                    this.pageInfo = res;
                })
            },
            onSubmit () {
                this.loadData();
            },
            openCreateDialog () {
                this.dialogVisible = true;
            },
            onCreate () {

            },
            onShow (row) {
                this.showObject = row;
            },
            handleSelectionChange (val) {
                this.multipleSelection = val;
            },
            // 操作选中方法
            toggleSelection (rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    // 为空则清空
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handlePageChange (current) {
                this.pageInfo.current = current;
                this.loadData();
            }, addNewDialog () {
                this.saveFlag = 'add';
                this.dialogVisible = true;
                this.saveObject = {};
            }, handleEditClick (row) {
                this.saveFlag = 'edit';
                this.dialogVisible = true;
                userRole(row).then(res=>{
                    this.saveObject=res;
                });
            }, handleDeleteClick (row) {
                this.$confirm('确认删除此条用户数据?', '确认删除', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 确定之后删除
                    deleteUser(row).then(result => {
                        this.$message.success('删除成功！')
                        this.loadData();
                    });
                }).catch(() => {
                    console.log('取消删除..');
                });
            }, save () {
                this.dialogVisible = false
                if (this.saveFlag === 'edit') {
                    this.saveObject.password=createMD5(this.saveObject.password);
                    updateUser(this.saveObject).then(result => {
                        this.$message.success('更新成功！')
                        this.loadData();
                    })
                } else {
                    this.saveObject.password=createMD5(this.saveObject.password);
                    this.saveObject.userCode = this.saveObject.userAccount;
                    addUser(this.saveObject).then(result => {
                        this.$message.success('新增成功！');
                        this.loadData();
                    })
                }
            },currentSetRole(selVal){
                let rolePojo = this.roleList.find((item)=>{
                    return item.roleCode===selVal;
                });
                this.saveObject.roleId=rolePojo.roleId;
                this.saveObject.roleCode=rolePojo.roleCode;
            },handlePasswordClick(row){
                this.passwordDialogVisible = true;
                this.saveObject=row;
            },savePassword(){
                if(this.saveObject.password===createMD5(this.saveObject.oldPassword)){
                    this.saveObject.password=createMD5(this.saveObject.newPassword);
                    updateUser(this.saveObject).then(result => {
                        this.$message.success('更新成功！');
                        this.loadData();
                    })
                    this.passwordDialogVisible=false;
                }else{
                    this.$message.error("原密码匹配不一致，请重新输入正确的密码")
                };
            }
        }
    }
</script>

<style>
  .dashboard-container .el-dialog__header {
    border-bottom: 1px solid #dedede;
  }

  .dashboard-container .el-dialog__title {
    font-size: 16px;
    color: #333;
  }
</style>
<style scoped lang="scss">

  .main-div {
    padding: 20px 0 0 30px;

  .main-table {
    width: 100%;
    position: relative;
    height: 1200px;
    display: inline-block;
    vertical-align: top;
    border-radius: 5px;

  .hide-point-div {
    border-radius: 5px;
    width: 16px;
    height: 16px;
    z-index: 999;
    position: absolute;
  }

  .main-table-div {
    border-radius: 15px;
    border: 3px solid #3a5063;
    margin: 16px;
    padding: 16px;
    display: flex;
    position: relative;
    z-index: 1000;
    left: 100px;

  .link-left-node-div {
    width: 16px;
    height: 16px;
    background-color: #123456;
    position: absolute;
    right: 0px;
    top: 57px;
    z-index: 1000;
  }
  }

  .assist-table-div {
    border-radius: 15px;
    display: flex;
  }

  .float-table-div {
    margin-right: 10px;
    font-size: 12px;
    height: 100%;

  .btn-pos {
    border: 1px solid #99a9bf;
    background-color: #409EFF;
    color: #034460;
  }

  }

  .float-link-div {
    width: 10px;
    height: 100%;
    z-index: 1000;

  .link-right-node-div {
    top: 50%;
    margin-left: -16px;
    margin-top: 45px;
    height: 16px;
    width: 16px;
    background: #123456;
    z-index: 1000;
  }
  }
  }
  }

  .main-master {
    width: 50%;
    float: left;
    margin: 20px;
  }

  .main-all-master {
    float: left;
  }

  .main-dependent {
    float: left;
    border: 1px;
    box-sizing: border-box;
  }

  .main-all-dependent {
    float: left;
  }

  .text-input {
    width: 180px;
  }

  .tableInfo-div {
    height: 480px;
    overflow: auto;
  }

  .search-div {
  }

</style>
